<template>
  <el-submenu :index="menuItem.index" v-if="menuItem.child">
    <template #title>
      <!-- <i :class="menuItem.icon"></i> -->
      <icon
        v-if="menuItem.icon"
        :icon="menuItem.icon"
        size="lg"
        fixed-width
      ></icon>
      <i v-if="menuItem.icon">&nbsp;&nbsp;</i>
      <span style="font-size: 16px">{{ menuItem.title }}</span>
    </template>
    <MenuItem
      v-for="item in menuItem.child"
      :key="item.index"
      :menuItem="item"
    />
  </el-submenu>
  <el-menu-item :index="menuItem.index" v-else>
    <!-- <i :class="menuItem.icon"></i> -->
    <icon
      v-if="menuItem.icon"
      :icon="menuItem.icon"
      size="lg"
      fixed-width
    ></icon>
    <i v-if="menuItem.icon">&nbsp;&nbsp;</i>
    <span style="font-size: 16px">{{ menuItem.title }}</span>
  </el-menu-item>
</template>
<script>
// import MenuItem from "@/components/scraw/MenuItem.vue";
export default {
  components: {
    // MenuItem,
  },
  props: {
    menuItem: { title: String, icon: String, child: Array, index: String },
  },
  // setup(proxy, context) {
  //   // console.log(proxy);
  //   // console.log(context);
  // },
};
</script>
